<template>
	<view class="book">
		  <uni-segmented-control :current="current" :values="carTypeArr" @clickItem="onClickItem" style-type="text" active-color="#D62222"></uni-segmented-control>		<view class="content">
				<view v-show="current === 0">
					<!-- 手风琴效果 -->
				 <uni-collapse :accordion="true">
						<uni-collapse-item v-for="item in accordion" :key="item.id" :title="item.title" :show-animation="item.animation" style="margin-bottom: 10px;">
							<text class="content" @click="hanldweb(item)">{{ item.title }}</text>
						</uni-collapse-item>
					</uni-collapse>
					<uni-load-more
					:status="loadStatus"
					></uni-load-more>
				</view>
				<view v-show="current === 1">
					<uni-collapse :accordion="true">
						<uni-collapse-item v-for="item in accordion1" :key="item.id" :title="item.title" :show-animation="item.animation" style="margin-bottom: 10px;">
							<text class="content" @click="hanldweb(item)">{{ item.title }}</text>
						</uni-collapse-item>
					</uni-collapse>
					<uni-load-more
					:status="loadStatus1"
					></uni-load-more>
				</view>
				<view v-show="current === 2">
					<uni-collapse :accordion="true">
						<uni-collapse-item v-for="item in accordion2" :key="item.id" :title="item.title" :show-animation="item.animation" style="margin-bottom: 10px;">
							<text class="content" @click="hanldweb(item)">{{ item.title }}</text>
						</uni-collapse-item>
					</uni-collapse>
					<uni-load-more
					:status="loadStatus2"
					></uni-load-more>
				</view>
				<view v-show="current === 3">
					<uni-collapse :accordion="true">
						<uni-collapse-item v-for="item in accordion3" :key="item.id" :title="item.title" :show-animation="item.animation" style="margin-bottom: 10px;">
							<text class="content" @click="hanldweb(item)">{{ item.title }}</text>
						</uni-collapse-item>
					</uni-collapse>
					<uni-load-more
					:status="loadStatus3"
					></uni-load-more>
				</view>
			</view>

	</view>
</template>

<script>
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'//折叠面板
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	export default {
		data() {
			return {
				platform: 'ios',
				loadStatus: 'more',
				loadStatus1: 'more',
				loadStatus2: 'more',
				loadStatus3: 'more',
				page: 1,
				limit: 20,//每页显示几条
				page1: 1,
				limit1: 20,//每页显示几条
				page2: 1,
				limit2: 20,//每页显示几条
				page3: 1,
				limit3: 20,//每页显示几条
				bankList:[],
				refresh:false,
				current: 0,
				accordion: [],
				accordion1:[],
				accordion2:[],
				accordion3:[],
				carTypeArr:[],//类型
			}
		},
		onLoad(){
			this.getcarGettype();
				
			if(this.current==0){
				this.getBanklist()
			}
			if(this.current==1){
				this.getBanklist1()
			}
			if(this.current==2){
				this.getBanklist2()
			}
			if(this.current==3){
				this.getBanklist3()
			}
		},
		components: {
			uniSegmentedControl,uniCollapse,uniCollapseItem,
			
		},
		onReachBottom () {
			console.log(this.current)
			if (this.loadStatus === 'more'&&this.current == 0) {
				this.getBanklist()
			}
			if (this.loadStatus1 === 'more'&&this.current == 1) {
				this.getBanklist1()
			}
			if (this.loadStatus2 === 'more'&&this.current == 2) {
				this.getBanklist2()
			}
			if (this.loadStatus3 === 'more'&&this.current == 3) {
				this.getBanklist3()
			}
		},
		methods: {
			hanldweb(item){
				if(/\.(png|jpg|gif|jpeg|webp)$/.test(item.info)){
					let params = encodeURIComponent(
						'info=' + item.info
					)
					this.$common.navigateTo(
						'web-view?params=' + params
					)
				}else{
					uni.showLoading({
					    title: '下载中'
					});
					uni.downloadFile({
					  url: item.info,
					  success: function (res) {
					    var filePath = res.tempFilePath;
					    uni.openDocument({
					      filePath: filePath,
					      success: function (res) {
					        console.log('打开文档成功');
							  uni.hideLoading();
					      },
						  fail:function(res){
							 console.log('打开文档失败');
							uni.hideLoading();
						  }
					    });
					  },fail: function (res) {
						  uni.showLoading({
						      title: '下载失败'
						  });
						  setTimeout(function () {
						      uni.hideLoading();
						  }, 2000);
						}
					});
					
				}
				
			
			},
			onClickItem(index) {
				this.current = index;
				if(this.current==0){
					this.page = 1;
					this.getBanklist(true)
				}
				if(this.current==1){
					this.page1 = 1;
					this.getBanklist1(true)
				}
				if(this.current==2){
					this.page2 = 1;
					this.getBanklist2(true)
				}
				if(this.current==3){
					this.page3 = 1;
					this.getBanklist3(true)
				}
				console.log(index)
			},
			// 获取余额明细
			getBanklist(type) {
				// this.accordion=[];
				let data = {
					page: this.page,
					limit: this.limit,
					car_type:this.current+1//类型
				}
				
				this.loadStatus = 'loading'
				
				this.$api.carmanual(data, res => {
					if (res.status) {
						if (this.page >= res.total) {
							// 没有数据了
							this.loadStatus = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus = 'more'
							this.page ++
						}
						if(type){
							this.accordion = res.data;
							console.log(this.accordion)
						}else{
							this.accordion = [...this.accordion, ...res.data];
							console.log(this.accordion[1].info)
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			// 获取余额明细
			getBanklist1(type) {
				// this.accordion1=[];
				let data = {
					page: this.page1,
					limit: this.limit1,
					car_type:this.current+1//类型
				}
				
				this.loadStatus1 = 'loading'
				
				this.$api.carmanual(data, res => {
					if (res.status) {
						if (this.page1 >= res.total) {
							// 没有数据了
							this.loadStatus1 = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus1 = 'more'
							this.page1 ++
						}
						if(type){
							this.accordion1 = res.data
						}else{
							this.accordion1 = [...this.accordion1, ...res.data]
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			// 获取余额明细
			getBanklist2(type) {
				// this.accordion2=[];
				let data = {
					page: this.page2,
					limit: this.limit2,
					car_type:this.current+1//类型
				}
				
				this.loadStatus2 = 'loading'
				
				this.$api.carmanual(data, res => {
					if (res.status) {
						if (this.page2 >= res.total) {
							// 没有数据了
							this.loadStatus2 = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus2 = 'more'
							this.page2 ++
						}
					if(type){
						this.accordion2 = res.data
					}else{
						this.accordion2 = [...this.accordion2, ...res.data]
					}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			
			// 获取余额明细
			getBanklist3(type) {
				let data = {
					page: this.page3,
					limit: this.limit3,
					car_type:this.current+1//类型
				}
				
				this.loadStatus3 = 'loading'
				
				this.$api.carmanual(data, res => {
					if (res.status) {
						if (this.page3 >= res.total) {
							// 没有数据了
							this.loadStatus3 = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus3 = 'more'
							this.page3 ++
						}
						if(type){
							this.accordion3 = res.data
						}else{
							this.accordion3 = [...this.accordion3, ...res.data]
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			
			//获取类型
			getcarGettype() {
				this.$api.carGettype({}, res => {
					if (res.status) {
						this.carTypeArr = res.data.car_type; //设备类型
						 var result = this.carTypeArr.map(function(obj) {
						   return obj.name;
						});
						// let result = this.carTypeArr.map(obj=>return obj.name)
						console.log(result)
						this.carTypeArr = result;
						// let carTypeArr = [];
						// for (let i in this.car_type) {
						// 	carTypeArr.push(this.car_type[i]); //属性
						// }
						// this.carTypeArr = carTypeArr;
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style>
/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #f5f5f5;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.example-body {
		flex-direction: column;
		flex: 1;
	}

	.content {
		padding: 15px;
		font-size: 14px;
		line-height: 20px;
		color: #666;
	}

	.button {
		font-size: 26rpx;
		line-height: 90rpx;
	}
	/* #ifndef  MP-WEIXIN */
	.book>>>uni-collapse{
		background:none !important;
	}
	.book>>>segmented-control-item{
		background-color: #fff;
		line-height: 50px !important;
	}
	.book>>>uni-collapse-cell{
		background-color: #fff  !important;
		border-bottom-style:none  !important;
	}
	
	.book>>>uni-collapse-cell__title{
		font-size: 16px  !important;
		    font-weight: bold  !important;
		    color: #333333  !important;
	}
		
	.book>>>uni-collapse-cell--open{
		background-color: #fff  !important;
	}
	.book>>>content{
		    margin: 10px 17px  !important;
			padding: 0  !important;
	}
	
		
	.book>>>uni-collapse-cell__title:active{
		background-color: #fff  !important;
	}
	/* #endif */
	
	
	.book>>>.uni-collapse{
		background:none  !important;
	}
	.book>>>.segmented-control-item{
		background-color: #fff  !important;
		line-height: 50px !important;
	}
	.book>>>.uni-collapse-cell{
		background-color: #fff  !important;
		border-bottom-style:none  !important;
		border-radius:4px !important;
	}
	
	.book>>>.uni-collapse-cell__title{
		font-size: 16px  !important;
		    font-weight: bold  !important;
		    color: #333333  !important;
	}
		
	.book>>>.uni-collapse-cell--open{
		background-color: #fff  !important;
	}
	.book>>>.content{
		    margin: 10px 17px  !important;
			padding: 0  !important;
	}
	
		
	.book>>>.uni-collapse-cell__title:active{
		background-color: #fff;
	}
	
	.book>>>.segmented-control{
		    background-color: #fff;
			    justify-content: space-around;
	}
	
		
	.book>>>.segmented-control-item{
		flex: none;
	}
</style>
